<template>
    <my-layout>
      <pane size="20" min-size="20" max-size="35">
        <div class="my-flex-column w100 h100">
          <org-menu @node-click="onOrgNodeClick" select-first-node></org-menu>
        </div>
      </pane>
      <pane size="80">
        <div class="my-flex-column w100 h100">
          <el-card class="mt8" shadow="never" :body-style="{ paddingBottom: '0' }">
            <el-form @submit.stop.prevent style="max-width: 640px">
              <el-row :gutter="35">
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                  <el-form-item>
                    <my-select-input v-model="state.pageInput.dynamicFilter" :filters="state.filters" @search="onQuery" />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                  <el-form-item>
                    <el-button type="primary" icon="ele-Search" @click="onQuery"> 查询 </el-button>
                    <el-button type="primary" icon="ele-Search" @click="onFilter"> 高级查询 </el-button>
                    <el-button v-auth="'api:admin:formitem:add'" type="primary" icon="ele-Plus" @click="onAdd"> 新增 </el-button>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-card>
  
          <el-card class="my-fill mt8" shadow="never">
            <el-table v-loading="state.loading" :data="state.userListData" row-key="id" style="width: 100%">
              <el-table-column prop="keyName" label="名称" width="120" show-overflow-tooltip />
              <el-table-column prop="keyAlise" label="别名" width="120" show-overflow-tooltip />
              <el-table-column prop="uniDataType" label="数据类型" width="120" show-overflow-tooltip :formatter="formatterDataType"/>
              <el-table-column prop="inputMode" label="输入方式" width="120" show-overflow-tooltip :formatter="formatterInputMode"/>

              <el-table-column label="操作" width="140" header-align="center" align="center" fixed="right">
                <template #default="{ row }">
                  <el-button v-auth="'api:admin:user:update'" icon="ele-EditPen" size="small" text type="primary" @click="onEdit(row)">编辑</el-button>
                  <my-dropdown-more
                    v-auths="['api:admin:user:set-manager', 'api:admin:user:reset-password', 'api:admin:user:delete', 'api:admin:user:one-click-login']"
                  >
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item v-if="auth('api:admin:user:delete')" @click="onDelete(row)">删除用户</el-dropdown-item>
                        
                      </el-dropdown-menu>
                    </template>
                  </my-dropdown-more>
                </template>
              </el-table-column>
            </el-table>
            <div class="my-flex my-flex-end" style="margin-top: 20px">
              <el-pagination
                v-model:currentPage="state.pageInput.currentPage"
                v-model:page-size="state.pageInput.pageSize"
                :total="state.total"
                :page-sizes="[10, 20, 50, 100]"
                small
                background
                @size-change="onSizeChange"
                @current-change="onCurrentChange"
                layout="total, sizes, prev, pager, next, jumper"
              />
            </div>
          </el-card>
  
          <FormItemForm ref="formItemFormRef" :title="state.formItemFormTitle"></FormItemForm>
          <user-reset-pwd ref="userRestPwdRef" title="提示"></user-reset-pwd>
          <MyFilterDialog ref="myFilterDialogRef" :fields="state.filters" @sure="onFilterSure"></MyFilterDialog>
        </div>
      </pane>
    </my-layout>
  </template>
  
  <script lang="ts" setup name="patrol/formitem">
  import { ref, reactive, onMounted, getCurrentInstance, onBeforeMount, defineAsyncComponent } from 'vue'
  import { FormItemPageOutput, PageInputFormItemGetPageDto ,OrgListOutput} from '/@/api/admin/data-contracts'
  import { FormItemApi } from '/@/api/admin/FormItem'
  import eventBus from '/@/utils/mitt'
  import { auth } from '/@/utils/authFunction'
  import { Pane } from 'splitpanes'
  import { useUserInfo } from '/@/stores/userInfo'
  import { Session } from '/@/utils/storage' 
  
  // 引入组件
  const OrgMenu = defineAsyncComponent(() => import('/@/views/admin/org/components/org-menu.vue'))
  const MyDropdownMore = defineAsyncComponent(() => import('/@/components/my-dropdown-more/index.vue'))
  const MySelectInput = defineAsyncComponent(() => import('/@/components/my-select-input/index.vue'))
  const MyLayout = defineAsyncComponent(() => import('/@/components/my-layout/index.vue'))
  const MyFilterDialog = defineAsyncComponent(() => import('/@/components/my-filter/dialog.vue'))

  const FormItemForm = defineAsyncComponent(() => import('./components/formitem-form.vue'))

  const { proxy } = getCurrentInstance() as any
  
  const formItemFormRef = ref()
  const userRestPwdRef = ref()
  const myFilterDialogRef = ref()
  
  const storesUseUserInfo = useUserInfo()
  
  const state = reactive({
    loading: false,
    formItemFormTitle: '',
    total: 0,
    pageInput: {
      currentPage: 1,
      pageSize: 20,
      filter: {
        orgId: null,
      },
      dynamicFilter: {},
    } as PageInputFormItemGetPageDto,
    userListData: [] as Array<FormItemPageOutput>,
    filters: [
      {
        field: 'name',
        operator: 'Contains',
        description: '姓名',
        componentName: 'el-input',
        defaultSelect: true,
      },
      {
        field: 'mobile',
        operator: 'Contains',
        description: '手机号',
        componentName: 'el-input',
      },
      {
        field: 'email',
        operator: 'Contains',
        description: '邮箱',
        componentName: 'el-input',
      },
      {
        field: 'userName',
        operator: 'Contains',
        description: '用户名',
        componentName: 'el-input',
      },
      {
        field: 'createdTime',
        operator: 'daterange',
        description: '创建时间',
        componentName: 'el-date-picker',
        type: 'date',
        config: {
          type: 'daterange',
          format: 'YYYY-MM-DD',
          valueFormat: 'YYYY-MM-DD',
        },
      },
    ] as Array<DynamicFilterInfo>,
  })
  
  onMounted(() => {
    eventBus.off('refreshFormItem')
    eventBus.on('refreshFormItem', async () => {
      onQuery()
    })
  })
  
  onBeforeMount(() => {
    eventBus.off('refreshFormItem')
  })
  
  //查询分页
  const onQuery = async () => {
    state.loading = true
    const res = await new FormItemApi().getPage(state.pageInput).catch(() => {
      state.loading = false
    })
  
    state.userListData = res?.data?.list ?? []
    state.total = res?.data?.total ?? 0
    state.loading = false
  }
  
  //高级查询
  const onFilter = () => {
    myFilterDialogRef.value.open()
  }
  
  const onFilterSure = (dynamicFilter: any) => {
    state.pageInput.dynamicFilter = dynamicFilter
    onQuery()
  }
  
  //新增
  const onAdd = () => {
    state.formItemFormTitle = '新增表单项'
    formItemFormRef.value.open();
  }
  
  //修改
  const onEdit = (row: FormItemPageOutput) => {
    state.formItemFormTitle = '编辑表单项'
    formItemFormRef.value.open(row)
  }
  
  //删除
  const onDelete = (row: FormItemPageOutput) => {
    proxy.$modal
      .confirmDelete(`确定要删除【${row.keyAlise}】?`)
      .then(async () => {
        // await new FormItemApi().delete({ id: row.id }, { loading: true, showSuccessMessage: true })
        // onQuery()
      })
      .catch(() => {})
  }
  

  
  const onSizeChange = (val: number) => {
    state.pageInput.pageSize = val
    onQuery()
  }
  
  const onCurrentChange = (val: number) => {
    state.pageInput.currentPage = val
    onQuery()
  }
  
  const onOrgNodeClick = (node: OrgListOutput | null) => {
    if (state.pageInput.filter) {
      state.pageInput.filter.orgId = node?.id
    }
    onQuery()
  }

  const formatterInputMode = (row: any, column: any, cellValue: any) => {
    let label = ''
  switch (cellValue) {
    case 1:
    case 'Input':
      label = '手动输入'
      break
    case 2:
    case 'Select':
      label = '下拉单选'
      break
    case 3:
    case 'MultSelect':
      label = '下拉多选'
      break
    case 4:
    case 'List':
      label = '列表单选'
      break
    case 5:
    case 'MultList':
      label = '列表多选'
      break
      case 99:
    case 'System':
      label = '系统赋值'
      break
  }
  return label
}
const formatterDataType = (row: any, column: any, cellValue: any) => {
  let label = ''
  switch (cellValue) {
    case 1:
    case 'Boolean':
      label = '布尔'
      break
    case 2:
    case 'String':
      label = '字符串'
      break
    case 3:
    case 'Long':
      label = '长整型'
      break
    case 4:
    case 'Double':
      label = '浮点'
      break
    case 7:
    case 'DateTime':
      label = '时间'
      break
  }
  return label
}

  </script>
  
  <style scoped lang="scss"></style>
  